@charset "utf-8";
@import "common";
@import "common/carousel";


.kv_wrap{
    width:1263px;
    margin: 0 auto;
    font-size: 0;
    position: relative;
    overflow: hidden;
    >div{
        width:83px ;
        height: 420px;
    }
    .left{
        background: yellow;
        position: absolute;
        z-index: 1;
        left: 0;
        background: url(../img/kv_left.jpg) no-repeat;
    }
    .right{
        background: black;
        position: absolute;
        z-index: 1;
        right: 0;
        top: 0;
        background: url(../img/kv_right.jpg) no-repeat;
    }
    .kv{
        width: 1100px;
        margin: 0 auto;
        li{
            text-align: center;
            img{
                height:100%;
                width: auto;
            }
        }
    }
}
.lp{
    @include wrap;
    margin-top: 4px;
    ul{
        display: flex;
        justify-content: space-between;
        li{
            width: 216px;
            height: 83px;
        }
    }
}
.main{
    @include wrap;
    
    h5{
        text-align: center;
        margin: 40px 0 39px;
        font-size: 16px;
        font-weight: normal;
        color:#333333;
        position: relative;
        a{
            position: absolute;
            right: 0;
            top: 1px;
            text-transform: uppercase;
            color:#333333;
            &:hover{
                color: red;
            }
        }
    }
    //产品推荐
    .products_recommend{
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        padding-bottom: 45px;
        div{
            display: inline-block;
        }
        .content{
            font-size: 0;
            margin-left: 20px;
            padding-right: 14px;
            
            p{
                font-size: 14px;
                color: #444f58;
                width: 114px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                .icon-renminbi{
                    font-size: 14px;
                }
            }
            p:first-child{
//              display: inline-block;
                margin: 37px 0 22px;
            }
            a{
                display: inline-block;
                font-size: 12px;
                width: 54px;
                height: 19px;
                text-align: center;
                color: white;
                line-height: 19px;
                margin-bottom: 5px;
                &:hover{
                    font-weight: bold;
                }
            }
            
            a:nth-child(2){
                background: red;
            }
            a:nth-child(3){
                background: black;
            }
        }
        .line{
            height: 141px;
            width: 1px;
            background: #e5e5e5;
            position: relative;
            top:5px;
        }
        .imgFix{
            @include imgFix2(100px,129px);
            vertical-align: top;
        }
    }
}
.advertising{
    @include imgFix2(100%,168px);
    overflow: hidden;
}
//定制骑行服
.custom{
    display: flex;
    .nav-title{
        width:200px ;
        height: 116px;
        line-height: 116px;
        background: url(../img/title-pic.png) no-repeat;
        .shade{
            height: 100%;
            width: 100%;
            background: rgba(0,0,0,.5);
            text-align: center;
        }
        p{
            display: inline-block;
            text-align: center;
            color: white;
            width: 46px;
            margin:0 auto;
            font-size: 20px;
            line-height: 30px;
            &:after{
                content: "";
                display: block;
                height: 1px;
                width: 90%;
                background: white;
                margin: 0 auto;
            }
        }
    }
    .nav-list{
        margin-top: 12px;
        ul{
            background: #efefef;
            padding:10px 0 14px;
            margin-top: 8px;
            >li{
                text-align: center;
                padding:10px 0 11px;
                a{
                    color: #7f7f7f;
                }
                &:hover{
                    background:grey;
                    a{
                        color: white;
                    }
                }
            }
        }
        
    }
    .right{
        margin-left:8px ;
        .right-top,.right-bottom{
            display: flex;
            width: 892px;
            justify-content: space-between;
            >div{
                border:1px solid #efefef;
                width: 198px;
                height: 278px;
                position: relative;
                
                p{
                    font-size: 14px;
                }
            }
            >div:first-child{
                width: 266px;
                height: 279px;
                p{
                    font-size: 20px;
                   
                }
                >div{
                    width: 100%;
                    height:65px;
                    background: rgba(235,0,0,.8);
                    position: absolute;
                    bottom: 0;
                    color: white;
                    padding-top: 15px;
                    padding-left: 22px;
                    padding:15px 16px 22px 22px;
                    box-sizing: border-box;
                    .more{
                        text-align: right;
                    }
                }
            }
             >div:first-child~div{
                 background: #efefef;
                 &:hover{
                     .imgContent{
                         div{
                             opacity: 2;
                         }
                     }
                     .btn{
                        img{
                            transform: rotate(0);
                            animation: turn 300ms linear infinite;
                        }
                    }
                }
                 .imgContent{
                     width: 100%;
                     height: 198px;
                     position: relative;
                     img{
                         width: 100%;
                         vertical-align: middle;
                     }
                     div{
                         opacity: 0;
                         position: absolute;
                         width: 100%;
                         height: 100%;
                         background: rgba(0,0,0,.5);
                         top: 0;
                         color:white;
                         text-align: center;
                         line-height: 198px;
                         transition: all 300ms;
                         p{
                            font-size: 20px; 
                            border:1px solid white;
                            line-height: normal;
                            margin-top: 40%;
                         }
                     }
                 }
                 .description{
                     padding: 9px 11px 10px 13px;
                     box-sizing: border-box;
                     p:first-child{
                          margin-bottom: 2px;
                     }
                     p:nth-child(2){
                         margin-left: -3px;
                     }
                     p{
                         white-space: nowrap;
                         overflow: hidden;
                         text-overflow: ellipsis;
                     }
                 }
             }
             .description{
                position: relative;
                
                .btn{
                   float: right;
                }
            }
        }
        .right-top{
            margin-bottom: 7px;
            >div:first-child{
                background: url(../img/custom-made-gen.png) no-repeat -38px -53px/132% auto;
            }
        }
        .right-bottom{
            >div:first-child{
                background: url(../img/custom-made-pro.jpg) no-repeat 0px -1px/149% auto;
            }
           
        }
    }
    
}
.customized{
    .title{
        display: flex;
        justify-content: space-between;
        div{
            height: 214px;
            width: 545px;
            border: 1px solid #dee0e2;
            text-align: center;
            background: url(../img/customized-jacket.jpg) no-repeat center center/auto 100%;
            transition: all 1s;
            &:hover{
                background-size: auto 130%;
            }
            a{
                color: white;
            }
            h6{
                margin: 82px 0 10px;
                font-size: 24px;
                font-weight: bolder;
                text-transform: uppercase;
                font-family: "blackadder";
                @include textOverflow;
            }
            p{
                font-size: 16px;
                @include textOverflow;
            }
            
        }
        .pink{
            background-image: url(../img/customized-jacket02.jpg);
         }
         .blue{
            background-image: url(../img/customized-jacket03.jpg); 
         }
         .green{
             background-image:url(../img/customized-jacket04.jpg)
         }
    }
    .content{
        margin-top:6px;
        display: flex;
        justify-content: space-between;
        .list{
            width:199px;
             .list-content{
                 margin-top: 7px;
                    li{
                        padding: 11px 0;
                    }
                }
             ul{
                background: #efefef;
                padding:14px 0 ;
                
                >li{
                    text-align: center;
                    padding:12px 0;
                    a{
                        color: #7f7f7f;
                    }
                    &:hover{
                        background:grey;
                        a{
                            color: white;
                        }
                    }
                }
            }
        }
        .list~div{
            border:1px solid #efefef;
            background: #efefef;
            width: 213px;
            height: 294px;
            &:hover{
                .imgContent{
                     div{
                         opacity: 2;
                     }
                 }
                 .btn{
                    img{
                        transform: rotate(0);
                        animation: turn 300ms linear infinite;
                    }
                }
            }
             .imgContent{
                 width: 100%;
                 height: 213px;
                 overflow: hidden;
                 position: relative;
                 img{
                     width: 100%;
                 }
                  div{
                         opacity: 0;
                         position: absolute;
                         width: 100%;
                         height: 100%;
                         background: rgba(0,0,0,.5);
                         top: 0;
                         color:white;
                         text-align: center;
                         line-height: 198px;
                         transition: all 300ms;
                         p{
                            font-size: 20px; 
                            border:1px solid white;
                            line-height: normal;
                            margin-top: 40%;
                         }
                     }
             }
             .description{
                 padding: 9px 11px 10px 13px;
                 box-sizing: border-box;
                 p:first-child{
                      margin-bottom: 2px;
                 }
                 p:nth-child(2){
                     margin-left: -3px;
                 }
                 p{
                     font-size: 14px;
                     white-space: nowrap;
                     overflow: hidden;
                     text-overflow: ellipsis;
                 }
                 a{
                     float: right;
                 }
             }
        }
        .list-title{
            width:199px ;
            height: 133px;
            line-height: 116px;
            background: url(../img/title-pic.png) no-repeat;
            .shade{
                height: 100%;
                width: 100%;
                background: rgba(0,0,0,.5);
                text-align: center;
            }
            p{
                display: inline-block;
                text-align: center;
                color: white;
                width: 46px;
                margin:0 auto;
                font-size: 20px;
                line-height: 30px;
                &:after{
                    content: "";
                    display: block;
                    height: 1px;
                    width: 90%;
                    background: white;
                    margin: 0 auto;
                }
            }
        
        }
       
    }
}
.sportwear{
    ul{
        display: flex;
        justify-content: space-between;
        li{
            display: block;
            height: 299px;
            width:271px;
            border:1px solid #dee0e2;
            border-bottom: none;
            background: url(../img/c-sportwear01.jpg) no-repeat 0 0/100% auto;
            position: relative;
             p{
                font-size: 22px;
               
            }
            >div{
                width: 100%;
                height:80px;
                background: rgba(235,0,0,.8);
                position: absolute;
                bottom: 0;
               
                padding-top: 15px;
                padding-left: 22px;
                padding:10px 16px 22px 22px;
                box-sizing: border-box;
                .more{
                    text-align: right;
                }
                a{
                     color: white;
                     &:hover{
                         color:black;
                     }
                }
            }
        }
        .two{
            background: url(../img/c-sportwear02.jpg) no-repeat 0 0/100% auto;
        }
        .three{
            background: url(../img/c-sportwear03.jpg) no-repeat 0 0/100% auto;
        }
        .four{
            background: url(../img/c-sportwear04.jpg) no-repeat 0 0/100% auto;
        }
    }
}
.brand{
    .row{
        display: flex;
        justify-content: space-between;
        margin-bottom: 7px;
        >div{
            width: 176px;
            height: 81px;
            overflow: hidden;
            transition: all 500ms;
            &:hover{
                box-shadow: 0 2px 6px gray;
                transform: translateY(-2px);
            }
        }
        >.more:hover{
            box-shadow: none;
            transform: none;
        }
    }
    .row:nth-child(2){
        margin-bottom: 40px;
    }
    .more{
        text-align: center;
        line-height: 81px;
        a{
           color:#050605;
           text-transform:uuppercase; 
           &:hover{
               color:$aChooes;
           }
        }
    }
}


